import { Dispatch, JSX, SetStateAction } from "react"
import Grid, { GridChar } from "./Grid"

interface BoardProps {
    chars: GridChar[]
    //setChars:Dispatch<SetStateAction<GridChar[]>>
    onClick:(idx:number)=>void
}


const Board: React.FC<BoardProps> = ({ chars,onClick }) => {
 
    var rowList:JSX.Element[] = []
    for(var i=0;i<9;i+=3) {
        var row:JSX.Element[] = []
        for(var j=i;j<i+3;j++) 
            row.push(
                <Grid char={ chars[j] } idx={j} onClick={onClick} />
            ) 
        
        rowList.push(
            <div className="grid-row">
                {row}
            </div>
        )
    }
    
    return (
        <div>
            {rowList}
        </div>
    )
}


export default Board;